import React from "react";
import {  NavLink } from 'react-router-dom';
import { observer, inject } from "mobx-react";
import { toJS} from "mobx";
import { withRouter } from "react-router-dom";
import { ListViewPage } from "weaver-mobile-page";
import { Tools,Icon} from 'weaver-mobile';
import HOCcomponent from "../hocComponent";
import ComListItem from '../../governTools/comListItem/comListItem.js';
const getLabel = Tools.getLabel;

/*
 * @info: 任务阶段组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 20-03-2019 09:29:47
 */
 @inject("mainStore","infoStore")
 @withRouter
 @observer
class SubtasksPage extends React.Component {
  static defaultProps = {
    prefixCls: 'govern-list',
  }
  componentWillUnmount(){
    this.props.mainStore.actionSheetStore.clearData();
    //this.props.infoStore.actionSheetStore.clearData();
  }
  render() {
    const { subtasksListStore, isCommentRight, isright, match:{url},history:{replace}} = this.props;
    const newPath = url.substr(0,url.lastIndexOf('/'));
    //const decomposeTaskLayoutData = this.props.mainStore.actionSheetStore.decomposeTaskLayoutData.length != 0 ? this.props.mainStore.actionSheetStore.decomposeTaskLayoutData : this.props.infoStore.actionSheetStore.decomposeTaskLayoutData;
    return (
      <div
        className="g-subtasksPage"
        isright={isright}
        iscommentright={isCommentRight}
        //decomposeTaskLayoutData={decomposeTaskLayoutData}
      >
        <ListViewPage.Normal
          store={subtasksListStore}
          heightSpace={
            window.getThemeVars ? window.getThemeVars()["button-height"] : 47
          }
          onRowClick={(rowData) => {
            replace(`${newPath}/content?id=${rowData.id}`);
          }}
          getTemplate={this.getTemplate}
        />
      </div>
    );
  }
  getTemplate = (template) => {
    //const decomposeTaskLayoutData = this.props.mainStore.actionSheetStore.decomposeTaskLayoutData.length != 0 ? this.props.mainStore.actionSheetStore.decomposeTaskLayoutData : this.props.infoStore.actionSheetStore.decomposeTaskLayoutData;
    let renderConponent = ()=>{};
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (data) => {
          const {id,mobileNamespan,mobileEnddatespan,mobileResponsiblespan,dataidspan,mobile_statusspan,mobile_statusColorspan,} = data;
          renderConponent = (linkPath)=>(
            <NavLink
              to={{
                pathname: linkPath,
                search: `?id=${id}`,
                state: { 'namespan': mobileNamespan }
              }}
              exact
              activeClassName="active"
            >
              <div className='namespan' style={dataidspan === '1' ? { color: '#868686' } : null}>{`${mobileNamespan.length > 0 ? mobileNamespan : getLabel("140", "未设置标题")}`}
              <span style={{fontSize: '9px',border:' 1px solid (mobile_statusColorspan)' ,backgroundColor: (mobile_statusColorspan) ,borderRadius: '3px',padding: '0px 2px',color: '#fff',right: '15px',position: 'absolute'}} >{mobile_statusspan}</span>
              </div>
              <div className='responsiblespan'>{getLabel("120", "责任人")}:{mobileResponsiblespan}</div>
              <div className='responsiblespan'>{getLabel("130", "计划结束日期")}:{mobileEnddatespan}</div>
            </NavLink>
          )
          return (
              // <ComListItem data={data}>
              //   {/* 分解 于每行后面有分解加号 */}
              //   {/* {decomposeTaskLayoutData.length != 0 && <span onClick={this.showActionSheet.bind(this,mobileNamespan,id)}><Icon type="tianjia" color="#55b1f9"/></span>} */}
              // </ComListItem>
               <ComListItem data={data} render={(linkPath)=>{
                return renderConponent(linkPath)
              }}></ComListItem>
          );
        },
      }],
    };
    return newTemp;
  }
  // showActionSheet(mobileNamespan,id,e) {
  //   e.preventDefault();
  //   e.stopPropagation();
  //   const {mainStore: {actionSheetStore:{getDecomposeTaskLayout}},history:{push},match:{url}} = this.props
  //   const newurl = url.substr(0,url.indexOf('/info'));
  //   getDecomposeTaskLayout(push,newurl);
  // }
}
export default HOCcomponent(SubtasksPage);
